<template>
    <div>
        <div class="gulu-tabs">
            <div class="gulu-tabs-nav" ref="container">

                <div class="gulu-tabs-nav-item" v-for="(t, index) in titles"
                    :ref="el => { if (t === selected) selectedItem = el }" @click="select(t)"
                    :class="{ selected: t === selected }" :key="index">{{ t }}</div>
                <div class="gulu-tabs-nav-indicator" ref="indicator"></div>
            </div>
        </div>
        <div class="gulu-tabs-content"> </div>
        <component :is="current" :key="current.props.title" />
    </div>

</template>


<script lang="ts">
import { computed, onMounted, ref, watchEffect } from 'vue'
import Tab from './Tab.vue'
export default {
    props: {

        selected: {
            type: String
        }
    },
    setup(props, context) {
        const selectedItem = ref<HTMLDivElement>(null)
        const container = ref<HTMLDivElement>(null)
        const indicator = ref<HTMLDivElement>(null)
        const defaults = context.slots.default()

        onMounted(() => {
            watchEffect(() => {
                const {
                    width
                } = selectedItem.value.getBoundingClientRect()
                indicator.value.style.width = width + 'px'
                const {
                    left: left1
                } = container.value.getBoundingClientRect()
                const {
                    left: left2
                } = selectedItem.value.getBoundingClientRect()
                const left = left2 - left1
                indicator.value.style.left = left + 'px'
            }, { flush: 'post' })
        })

        defaults.forEach((tag) => {
            //@ts-ignore
            if (tag.type.name !== Tab.name) {
                throw new Error('Tabs 子标签必须是Tab')
            }
        })
        const current = computed(() => {

            return defaults.filter((tag) => {
                if (tag.props) {
                    return tag.props.title === props.selected
                }
            })[0]
        })
        const titles = defaults.map((tag) => {
            if (tag.props) {
                return tag.props.title
            }
        })
        const select = (title: string) => {
            context.emit('update:selected', title)
        }

        return {
            defaults, titles, current, select,
            selectedItem, container, indicator
        }
    }
}
</script>

<style lang="scss">
$blue: #40a9ff;
$color: #333;
$border-color: #d9d9d9;

.gulu-tabs {
    &-nav {
        display: flex;
        color: $color;
        border-bottom: 1px solid $border-color;
        position: relative;

        &-item {
            padding: 8px 0;
            margin: 0 16px;
            cursor: pointer;

            &:first-child {
                margin-left: 0;
            }

            &.selected {
                color: $blue;

            }

        }

        &-indicator {
            position: absolute;
            height: 3px;
            background: $blue;
            left: 0;
            bottom: -1px;

            transition: all 250ms;
        }
    }

    &-content {
        padding: 8px 0;




    }

}
</style>